<template>
  <div>
    <div class="pageTopTitle">
      <el-page-header @back="goBack" :content="channelData ?  channelData.name + '-渠道客户' : '客户查看'">
      </el-page-header>
    </div>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="客户名称" prop="name">
          <el-input
            v-model="queryParams.name"
            placeholder="请输入客户名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="app-container mt20">
      <el-row :gutter="10" class="mb20">
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
      <el-table v-loading="loading" :data="clientList">
        <el-table-column label="客户编号-名称" prop="serialNumber" width="140">
          <template slot-scope="scope">
            <div >{{ scope.row.serialNumber }}</div>
            <div class="f-w-bold">{{ scope.row.name }}</div>
          </template>
        </el-table-column>
        <el-table-column label="客户类型" prop="type" width="140"/>
        <el-table-column label="客户地址" prop="area" width="200">
          <template slot-scope="scope">
            <div>{{ scope.row.area }}</div>
            <div class="fs-12">{{ scope.row.address }}</div>
          </template>
        </el-table-column>
        <el-table-column label="最新跟进">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleAddFollowUp(scope.row)"
            >新增跟进
            </el-button>
            <div style="background-color: #f5f5f5;padding: 5px;font-size: 12px;color: #999;width: fit-content">
              {{ scope.row.latestRecord || '暂无跟进记录' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="有效期限" prop="createAt" width="200">
          <template slot-scope="scope">
            <div class="status-tag suc">有效期内</div>
            <div class="fs-12">{{ scope.row.startAt }} ~ {{ scope.row.endAt }}</div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { listClient } from '@/api/web/client'
import { getChannel } from '@/api/web/channel'

export default {
  name: 'Client',
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 客户表格数据
      clientList: [],
      channelData: {},
      // 客户类型
      clientTypeList: [{
        name: '个人客户',
        code: 'PE'
      }, {
        name: '企业客户',
        code: 'CO'
      }, {
        name: '机构客户',
        code: 'OR'
      }, {
        name: '其他',
        code: 'OT'
      }],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        channelId: null,
        serialNumber: null,
        name: null,
        type: null,
        area: null,
        provinceCode: null,
        cityCode: null
      },
    }
  },
  created() {
    this.queryParams.channelId = this.$route.params && this.$route.params.channelId;
    if(!this.queryParams.channelId) {
      return
    }
    this.getChannelData(this.queryParams.channelId)
    this.getList()
  },
  methods: {
    goBack() {
      // 返回上一页
      this.$router.go(-1)
    },

    getChannelData(channelId) {
      getChannel(channelId).then(response => {
        this.channelData = response.data
      })
    },

    /** 查询客户列表 */
    getList() {
      this.loading = true
      listClient(this.queryParams).then(response => {
        this.clientList = response.rows
        this.total = response.total
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
  }
}
</script>
<style lang="scss" scoped>
.drawer-content {
  padding: 0 30px 80px 20px;
}

.status-tag {
  position: relative;
  font-size: 12px;
  font-weight: bold;
  padding-left: 14px;
  color: #333;

}

.suc::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #00B42A;
  transform: translateY(-50%);
}

.drawer-footer {
  position: absolute;
  bottom: 0;
  box-sizing: border-box;
  text-align: right;
  padding: 16px;
  width: 100%;
  border-top: 1px solid #eee;
  background-color: #fff;
}

::v-deep .el-form-item__label {
  font-weight: 500 !important;
}

::v-deep .el-form--label-top .el-form-item__label {
  padding: 0 0 4px 0 !important;
}

.contact-info {
  display: flex;
  align-items: center;
  margin-bottom: 30px;

  .contact-item-name {
    // 文字竖直排列
    width: 20px;
    margin-right: 20px;
    font-size: 14px;
    text-align: center;
    border: 1px solid #165DFF;
    color: #165DFF;
    padding: 12px 0;
  }

  .btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
}


::v-deep .el-divider--horizontal {
  margin: 40px 0 !important;
}

</style>
